<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../css/style.css">
  <title>最佳实践</title>
</head>

<body>
<li>为列表渲染设置属性key</li>
<h3>路由切换，组件不变</h3>
<li>
  在使用Vue.js开发项目时，最常遇到的一个典型问题就是，当页面切换到同一个路由但不同的参数地址时，组件的生命周期钩子并不会重新触发
</li>
<li>
  因为vue-router会识别处两个路由使用的是同一个组件从而进行复用，并不会重新创建组件，因此组件的生命周期自然不会触发
</li>  
<li>
  解决办法
  <ul class="incent">
    <li>
      路由导航守卫beforeRouterUpdate方法：该守卫在当前路由改变且组件被复用时调用，所以可以在组件内定义路由导航守卫来解决问题<span>(推荐)</span>
    </li>
    <li>设置watch,监听router。</li>
  </ul>
</li>
<li>
  为所有路由统一添加query
  <ul class="incent">
    <li>
      如果路由上的query中有一些是从上游链路上传下来的，那么需要在应用的任何路由中携带，但是在所有跳转路由的地方都设置一遍会非常麻烦
    </li>
    <li>
      方法一：使用全局守卫beforeEach。
    </li>
  </ul>
</li>
<li>
  为组件样式设置作用域scope
</li>
<li>
  避免在scope中使用元素选择器
</li>
<li>
  单文件组件的文件名的大小写：单文件组件的文件名应该始终是单词首字母大写(PascalCase)，或者始终是横线连接的(kebab-case)
</li>

  <script src="../js/constructor/13.js"></script>
</body>
</html>